<template>
  <a-form
      ref="formRef"
      class="my-form"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
  >
    <a-form-item label="表单日期" required name="date">
      <a-date-picker
          v-model:value="formState.date"
          show-time
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
      />
    </a-form-item>
    <a-form-item ref="name" label="客户姓名" name="name" required>
      <a-input v-model:value="formState.name" placeholder="输入客户姓名"/>
    </a-form-item>

    <a-form-item ref="phone" label="客户电话" name="phone" required>
      <a-input v-model:value="formState.phone" placeholder="输入客户电话">
        <template #prefix>
          <MobileOutlined/>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item ref="address" label="客户所在区域" name="address">
      <a-input v-model:value="formState.address" placeholder="输入客户所在区域"/>
    </a-form-item>
    <a-form-item label="跟进记录"
                 name="remark"
                 required>
      <a-textarea v-model:value="formState.remark"/>
    </a-form-item>
    <a-form-item label="录音文件" name="fileList">
      <a-upload v-model:file-list="formState.fileList"
                :max-count="1"
                list-type="picture"
                accept=".mp3,.wav,.ogg"
                :before-upload="beforeUpload" @remove="handleRemove">
        <a-button>
          <UploadOutlined></UploadOutlined>
          选择录音文件
        </a-button>
      </a-upload>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button :loading="loading" type="primary" @click="onSubmit">创建</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">清空</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup lang="ts">
import dayjs, {Dayjs} from 'dayjs';
import {reactive, ref, toRaw} from 'vue';
import type {UnwrapRef} from 'vue';
import type {Rule} from 'ant-design-vue/es/form';
import {MobileOutlined, UploadOutlined} from '@ant-design/icons-vue';
import {useClueStore} from "@/stores/clue";
import {useSettingStore} from "@/stores/setting";

const clueStore = useClueStore();
const settingStore = useSettingStore();

export interface FormState {
  name: string;
  phone: string;
  date: Dayjs | string;
  remark: string;
  address: string;
  fileList: any[];
}


const formRef = ref();
const loading = ref(false);
const labelCol = {span: 5};
const wrapperCol = {span: 13};
const formState: UnwrapRef<FormState> = reactive({
  name: '',
  phone: '',
  address: '',
  date: dayjs(),
  remark: '',
  fileList: [],
});

const checkFileList = (rule: any, value: any) => {
  console.log("settingStore.setting.need_audio", settingStore.setting.need_audio);
  if (settingStore.setting.need_audio) {
    if (value.length === 0) {
      return Promise.reject('请上传录音文件');
    }
  }
  return Promise.resolve();
}

const rules: Record<string, Rule[]> = {
  name: [
    {required: true, message: '请输入客户姓名', trigger: 'change'},
  ],
  phone: [
    {required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话', trigger: 'blur'},
  ],
  date: [{required: true, message: '请选择日期', trigger: 'change', type: 'object'}],
  remark: [{required: true, message: '请输入跟进备注', trigger: 'blur'}],
  fileList: [{validator: checkFileList, trigger: 'change'}],
};

const handleRemove = (file: any) => {
  const index = formState.fileList.indexOf(file);
  const newFileList = formState.fileList.slice();
  newFileList.splice(index, 1);
  formState.fileList = newFileList;
};

const beforeUpload = (file: any) => {
  formState.fileList = [...(formState.fileList || []), file];
  return false;
};

const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        if (loading.value) return;
        loading.value = true;
        try {
          const r = await clueStore.postApi(toRaw(formState));
          if (r)
            resetForm();
        } catch (e) {
        }
        loading.value = false;
      })
      .catch((error: any) => {
        console.log('error', error);
      });
};
const resetForm = () => {
  formRef.value.resetFields();
  formState.date = dayjs();
};

</script>
<style scoped lang="less">
.my-form {
  padding: 20px;
}

</style>
